@use '../variables';
@use '../../../styles/mixins';

$block: '.#{variables.$ns}checkbox';

#{$block} {
    &__indicator {
        display: inline-block;
        position: relative;
        cursor: inherit;

        &::before {
            content: '';
            position: absolute;
            inset: 0;

            background-color: transparent;
            border: 1px solid var(--g-color-line-generic-accent);
            border-radius: 4px;
            transition: background 0.1s linear;
        }

        &::after {
            content: '\00a0';
            visibility: hidden;
        }
    }

    &__icon {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;

        pointer-events: none;
        visibility: hidden;
        color: transparent;
        transform: translateY(-5px);
        transition:
            color 0.1s,
            transform 0.2s;
    }

    &__control {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        opacity: 0;
        background: none;
        border: none;
        outline: none;
        cursor: inherit;
    }

    &__outline {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        width: 100%;
        height: 100%;
        background: none;
        pointer-events: none;
        border-radius: 4px;
    }

    &__control:focus-visible + &__outline {
        @include mixins.focus-outline();
    }

    &_size {
        &_m {
            #{$block}__icon-svg_type_tick {
                width: 8px;
                height: 10px;
            }

            #{$block}__icon-svg_type_dash {
                width: 12px;
                height: 12px;
            }

            #{$block}__indicator {
                width: 14px;
                height: 14px;
            }
        }

        &_l {
            #{$block}__icon-svg_type_tick {
                width: 11px;
                height: 9px;
            }

            #{$block}__icon-svg_type_dash {
                width: 15px;
                height: 15px;
            }

            #{$block}__indicator {
                width: 17px;
                height: 17px;
            }
        }

        &_xl {
            #{$block}__icon-svg_type_tick {
                width: 16px;
                height: 13px;
            }

            #{$block}__icon-svg_type_dash {
                width: 22px;
                height: 22px;
            }

            #{$block}__indicator {
                width: 24px;
                height: 24px;
            }
        }
    }

    &:hover {
        #{$block}__indicator {
            &::before {
                border-color: var(--g-color-line-generic-accent-hover);
            }
        }
    }

    &_checked,
    &_indeterminate {
        #{$block}__indicator {
            &::before {
                background-color: var(--g-color-base-brand);
                border: transparent;
            }
        }

        #{$block}__icon {
            visibility: visible;
            color: var(--g-color-text-brand-contrast);
            transform: translateX(0);
        }
    }

    &_disabled {
        #{$block}__indicator {
            &::before {
                background-color: var(--g-color-base-generic-accent-disabled);
                border: transparent;
            }
        }

        &#{$block}_checked,
        &#{$block}_indeterminate {
            #{$block}__icon {
                color: var(--g-color-text-hint);
            }
        }
    }
}
